const { mockData } = require('./util')

const res = {
  result: [
    [{
      cidx: [0, 15],
      fullname: "北京市",
      id: "110000",
      location: {
        lat: 39.90469,
        lng: 116.40717
      },
      name: "北京",
      pinyin: ["bei", "jing"]
    }, {
      cidx: [16, 31],
      fullname: "天津市",
      id: "120000",
      location: { lat: 39.0851, lng: 117.19937 },
      name: "天津",
      pinyin: ["tian", "jin"]
    }, {
      cidx: [32, 42],
      fullname: "河北省",
      id: "130000",
      location: { lat: 38.03599, lng: 114.46979 },
      name: "河北",
      pinyin: ["he", "bei"],
    }, {
      cidx: [43, 53],
      fullname: "山西省",
      id: "140000",
      location: { lat: 37.87343, lng: 112.56272 },
      name: "山西",
      pinyin: ["shan", "xi"],
    }]
  ]
}

Page({
  onShareAppMessage() {
    return {
      title: 'tabs',
      path: 'page/weui/example/tabs/tabs'
    }
  },
  data: {
    tabs: [],
    activeTab: 0,
    list: [],
    src: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',
    toggle: true
  },

  onLoad() {
    const tabs = [
      {
        title: '技术开发',
        title2: '小程序开发进阶',
        img: 'http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSEV5QjxLDJaL6ibHLSZ02TIcve0ocPXrdTVqGGbqAmh5Mw9V7504dlEiatSvnyibibHCrVQO2GEYsJicPA/0?wx_fmt=jpeg',
        desc: '本视频系列课程，由腾讯课堂NEXT学院与微信团队联合出品，通过实战案例，深入浅出地进行讲解。',
      },
      {
        title: '产品解析',
        title2: '微信小程序直播',
        img: 'http://mmbiz.qpic.cn/sz_mmbiz_png/GEWVeJPFkSHALb0g5rCc4Jf5IqDfdwhWJ43I1IvriaV5uFr9fLAuv3uxHR7DQstbIxhNXFoQEcxGzWwzQUDBd6Q/0?wx_fmt=png',
        desc: '微信小程序直播系列课程持续更新中，帮助大家更好地理解、应用微信小程序直播功能。',
      },
      {
        title: '运营规范',
        title2: '常见问题和解决方案',
        img: 'http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSGqys4ibO2a8L9nnIgH0ibjNXfbicNbZQQYfxxUpmicQglAEYQ2btVXjOhY9gRtSTCxKvAlKFek7sRUFA/0?wx_fmt=jpeg',
        desc: '提高审核质量',
      },
      {
        title: '营销经验',
        title2: '流量主小程序',
        img: 'http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSH2Eic4Lt0HkZeEN08pWXTticVRgyNGgBVHMJwMtRhmB0hE4m4alSuwsBk3uBBOhdCr91bZlSFbYhFg/0?wx_fmt=jpeg',
        desc: '本课程共四节，将分阶段为开发者展示如何开通流量主功能、如何接入广告组件、不同类型小程序接入的建议，以及如何通过工具调优小程序变现效率。',
      },
      {
        title: '高校大赛1',
        title2: '2020中国高校计算机大赛',
        img: 'http://mmbiz.qpic.cn/mmbiz_jpg/TcDuyasB5T3Eg34AYwjMw7xbEK2n01ekiaicPiaMInEMTkOQtuv1yke5KziaYF4MLia4IAbxlm0m5NxkibicFg4IZ92EA/0?wx_fmt=jpeg',
        desc: '微信小程序应用开发赛',
      },
      {
        title: '高校大赛2',
        title2: '2020中国高校计算机大赛',
        img: 'http://mmbiz.qpic.cn/mmbiz_jpg/TcDuyasB5T3Eg34AYwjMw7xbEK2n01ekiaicPiaMInEMTkOQtuv1yke5KziaYF4MLia4IAbxlm0m5NxkibicFg4IZ92EA/0?wx_fmt=jpeg',
        desc: '微信小程序应用开发赛',
      },
      {
        title: '高校大赛3',
        title2: '2020中国高校计算机大赛',
        img: 'http://mmbiz.qpic.cn/mmbiz_jpg/TcDuyasB5T3Eg34AYwjMw7xbEK2n01ekiaicPiaMInEMTkOQtuv1yke5KziaYF4MLia4IAbxlm0m5NxkibicFg4IZ92EA/0?wx_fmt=jpeg',
        desc: '微信小程序应用开发赛',
      },
    ]
    this.getCitys()
    this.setData({ tabs })
    this.addBarrage()
  },

  addBarrage() {
    const barrageComp = this.selectComponent('.barrage')
    this.barrage = barrageComp.getBarrageInstance({
      font: 'bold 16px sans-serif',
      duration: 10,
      lineHeight: 2,
      mode: 'separate',
      padding: [10, 0, 10, 0],
      tunnelShow: false
    })
    this.barrage.open()
    const data = mockData(100)
    this.barrage.addData(data)
    this.timer = setInterval(() => {
      const data = mockData(100)
      this.barrage.addData(data)
    }, 2000)
  },

  fullscreenchange() {
    this.setData({ toggle: false })
    setTimeout(() => {
      if (this.barrage) this.barrage.close()
      this.setData({ toggle: true })
      this.addBarrage()
    }, 1000)
  },
  onTabClick(e) {
    const index = e.detail.index
    this.setData({
      activeTab: index
    })
  },

  onChange(e) {
    const index = e.detail.index
    this.setData({
      activeTab: index
    })
  },
  handleClick(e) {
    wx.navigateTo({
      url: './webview',
    })
  },
  onChoose(e) {
    console.log('onChoose', e)
  },
  getCitys() {
    const _this = this
    const cities = res.result[0]
    // 按拼音排序
    cities.sort((c1, c2) => {
      let pinyin1 = c1.pinyin.join('')
      let pinyin2 = c2.pinyin.join('')
      return pinyin1.localeCompare(pinyin2)
    })
    // 添加首字母
    const map = new Map()
    for (const city of cities) {
      const alpha = city.pinyin[0].charAt(0).toUpperCase()
      if (!map.has(alpha)) map.set(alpha, [])
      map.get(alpha).push({ name: city.fullname })
    }

    const keys = []
    for (const key of map.keys()) {
      keys.push(key)
    }
    keys.sort()

    const list = []
    for (const key of keys) {
      list.push({
        alpha: key,
        subItems: map.get(key)
      })
    }

    _this.setData({ list })
  }
})